<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="adm-panel">
			<div class="adm-panel-hd">
				<div class="index-hd">
					<router-link to="/">
						<i class="iconfont icon-home"></i>
					</router-link>
				</div>
				<el-tabs v-model="editableTabsValue" type="card" closable>
					<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="adm-panel-body ">
				<el-container class="el-container-scroll">
					<el-aside class="adm-side" width="180px">
						<div class="el-line-heading">
							<el-button><span class="iconfont icon-tiaocha"></span><span class="txt">案件总览</span></el-button>
						</div>
						<div class="scroll ht6">
						<el-menu class="el-icon-menu" default-active="1">
							<el-menu-item index="1"><span class="iconfont icon-erjitubiao-"></span><span>受案</span></el-menu-item>							<el-menu-item index="2"><span class="iconfont icon-hh"></span><span>回避</span></el-menu-item>							<el-menu-item index="3"><span class="iconfont icon-xunwen"></span><span>询问</span></el-menu-item>							<el-menu-item index="4"><span class="iconfont icon-tiaocha"></span><span>调查</span></el-menu-item>							<el-menu-item index="5"><span class="iconfont icon-anjian1"></span><span>吸毒案件办理</span></el-menu-item>							<el-menu-item index="6"><span class="iconfont icon-hangzhengchufa"></span><span>行政处罚</span></el-menu-item>							<el-menu-item index="7"><span class="iconfont icon-wupin1"></span><span>涉案物品处理</span></el-menu-item>							<el-menu-item index="8"><span class="iconfont icon-wenshu"></span><span>执行类文书</span></el-menu-item>							<el-menu-item index="9"><span class="iconfont icon-mingling"></span><span>责令处理</span></el-menu-item>							<el-menu-item index="10"><span class="iconfont icon-churujing"></span><span>出入境类文书</span></el-menu-item>							<el-menu-item index="11"><span class="iconfont icon-anjian"></span><span>案件终结</span></el-menu-item>							<el-menu-item index="12"><span class="iconfont icon-qita"></span><span>其他</span></el-menu-item>
						</el-menu>
						</div>
					</el-aside>
					<el-container>
						<div class="adm-panel-group">
							<div class="adm-notice">
								<span class="iconfont icon-gonggao"></span><span class="cont">调查案件处理调查案件处理调查案件处理调查案件处理调查案件处理</span>
							</div>
							<el-main class="adm-el-main scroll ht2">
								<div class="tags-cells">
									<div class="tags-hd">约束</div>
									<ul class="tags-list">
										<li>
											<el-tag>约束审批表</el-tag>
										</li>
										<li>
											<el-tag>解除约束审批表</el-tag>
										</li>
									</ul>
								</div>
								<div class="tags-cells">
									<div class="tags-hd">现场勘验</div>
									<ul class="tags-list">
										<li><el-tag type="success">现场勘验笔录</el-tag></li>
										<li><el-tag type="success">捉取、痕迹物证登记表</el-tag></li>
										<li><el-tag type="success">现场图</el-tag></li>
										<li><el-tag type="success">现场照片、录音录像</el-tag></li>
									</ul>
								</div>
								<div class="tags-cells">
									<div class="tags-hd">检查</div>
									<ul class="tags-list">
										<li>
											<el-tag type="danger">检查笔录</el-tag>
										</li>
										<li>
											<el-tag type="danger">检查审批表</el-tag>
										</li>
									</ul>
								</div>
								<div class="tags-cells">
									<div class="tags-hd">辨认</div>
									<ul class="tags-list">
										<li>
											<el-tag type="success">辨认笔录</el-tag>
										</li>
									</ul>
								</div>
								<div class="tags-cells">
									<div class="tags-hd">证据保全</div>
									<ul class="tags-list">
										<li>
											<el-tag type="warning">证据保全审批表</el-tag>
										</li>
										<li>
											<el-tag type="warning">查询财产审批表</el-tag>
										</li>
										<li>
											<el-tag type="warning">冻结财产审批表</el-tag>
										</li>
									</ul>
								</div>
								<div class="tags-cells">
									<div class="tags-hd">调取证据</div>
									<ul class="tags-list">
										<li>
											<el-tag>证据保全审批表</el-tag>
										</li>
										<li>
											<el-tag>查询财产审批表</el-tag>
										</li>
										<li>
											<el-tag>冻结财产审批表</el-tag>
										</li>
									</ul>
								</div>
							</el-main>
						</div>
					</el-container>
				</el-container>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				imageUrl: '',
				imageUrl2: '',
				editableTabsValue: '2',
				editableTabs: [{
					title: '行政案件列表',
					name: '1',
				},{
					title: '行政案件处理',
					name: '2',
				}],
				tabIndex: 1,
				files:[
					{
						img:require('../../assets/images/filte.png')
					},
					{
						img:require('../../assets/images/filte.png')
					},
					{
						img:require('../../assets/images/filte.png')
					},
					{
						img:require('../../assets/images/filte.png')
					}
				],
				bg:require('../../assets/images/bg.jpg'),
				skin:"skin1"
			}

		},
		methods: {
			handleChange(file, fileList) {
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(fileList)
			},
			handleChange2(file, fileList) {
				this.imageUrl2 = URL.createObjectURL(file.raw);
				console.log(fileList)
			},
			getData(data) {
				console.log(data)
				if(data ==1){
					this.bg = require('../../assets/images/bg.jpg')
					this.skin = "skin1"
				}else if(data == 2){
					this.skin = "skin2"
					this.bg = require('../../assets/images/bg3.png')
				}else{
					this.skin = "skin3"
					this.bg = require('../../assets/images/bg2.png')
				}
			}
		}
	}
</script>
